<template>
  <div class="main">
    <div class="black-block">
      <img class="logo" :src="logo" alt="" />
      <el-row :gutter="20" class="el-row k">
          <el-col :span="1" class="el-col" v-for="title,index in footInfoTitle" :key="index">
              {{title}}<br/><br/>
              <el-col class="el-col-info" v-for="info in footInfo[index]" :key="info">{{info}}</el-col>
            </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getFooterInfo, getFooterInfoTitle, getLogoImg } from "../../assets/data/footer";
export default {
  data: function () {
    return {
      logo: getLogoImg(),
      footInfoTitle:getFooterInfoTitle(),
      footInfo:getFooterInfo()
    };
  },
};
</script>

<style scoped>
.k{
    border: solid 1px solid;
}
.logo {
  width: 560px;
  /* top: -13%; */
  /* left: -5%; */
  position: absolute;
  bottom: -85px;
  left: -82px;
}
.black-block {
  width: 100%;
  height: 160px;
  bottom: 0;
  background: #1c1c1c;
  overflow: hidden;
  position: relative;
}
.el-row{
    position: relative;
    left: 23%;
    top: 7%;
    color: white;
    font-size: 14px;
    /* color: #589bc6; */
}
.el-col{
    /* border: 1px solid red; */
    font-weight: bold;
    width: 200px;
    text-align: left;
    cursor:default;
}
.el-col-info{
    color:#589bc6;
    font-weight:400;
    font-size: 10px;
    width: 200px;
    position: relative;
    left: -10px;
    text-align:left;
}
.el-col-info:hover{
    color:#d6000f;
    cursor: pointer;
}
</style>